<template>
  <div id="app">
    <vxe-toolbar>
      <template #buttons>
        <a-radio-group
          v-model="value"
          default-value="sz"
          @change="onChange"
          :style="{ marginRight: '10px' }"
        >
          <a-radio-button value="sz" :disabled="ApiForm.type != 'sz'">
            深市
          </a-radio-button>
          <a-radio-button value="sh" :disabled="ApiForm.type != 'sh'">
            泸市
          </a-radio-button>
        </a-radio-group>

        <a-select
          default-value="30"
          style="width: 120px"
          @change="handleChange"
        >
          <a-select-option value="30">近30天</a-select-option>
          <a-select-option value="90">近90天</a-select-option>
          <a-select-option value="180">近180天</a-select-option>
          <a-select-option value="360">近1年</a-select-option>
          <a-select-option value="1080">近3年</a-select-option>
        </a-select>
      </template>
    </vxe-toolbar>
    <div
      id="main"
      style="min-width: 300px; height: 500px; max-width: 100%"
    ></div>
  </div>
</template>

<script>
import echarts from 'echarts'
import { stockHistoryData } from '@/api/stock'
export default {
  name: 'app',
  data() {
    return {
      value: 'a',
      upColor: '#ec0000',
      upBorderColor: '#8A0000',
      downColor: '#00da3c',
      downBorderColor: '#008F28',
      data0: [],
      // 数据意义：开盘(open)，收盘(close)，最低(lowest)，最高(highest)
      data: [],
      data1: [],

      ApiForm: {
        datalen: 30, //默认30天
        scale: 240, //一天1条
        stockId: null,
        type: 'sz', //默认深市
      },
    }
  },
  created() {
    this.ApiForm.stockId = this.$route.query.id
    this.ApiForm.type = this.$route.query.type
    this.getEchartData()
  },
  methods: {
    handleChange(e) {
      this.ApiForm.datalen = e
      this.getEchartData()
    },
    /**
     * 获取数据
     */
    getEchartData(id) {
      stockHistoryData(this.ApiForm).then((res) => {
        this.data0 = this.splitData1(res.queryResult.list)
        this.drawChart()
      })
    },
    splitData1(rawData) {
      var categoryData = []
      var values = []
      for (var i = 0; i < rawData.length; i++) {
        categoryData.push(rawData[i].day)
        var form = [
          rawData[i].open,
          rawData[i].close,
          rawData[i].low,
          rawData[i].high,
        ]
        values.push(form)
      }
      return {
        categoryData: categoryData,
        values: values,
      }
    },
    // splitData(rawData) {
    //   var categoryData = []
    //   var values = []
    //   for (var i = 0; i < rawData.length; i++) {
    //     categoryData.push(rawData[i].splice(0, 1)[0])
    //     values.push(rawData[i])
    //   }
    //   return {
    //     categoryData: categoryData,
    //     values: values,
    //   }
    // },
    calculateMA(dayCount) {
      var result = []
      for (var i = 0, len = this.data0.values.length; i < len; i++) {
        if (i < dayCount) {
          result.push('-')
          continue
        }
        var sum = 0
        for (var j = 0; j < dayCount; j++) {
          sum += this.data0.values[i - j][1]
        }
        result.push(sum / dayCount)
      }
      return result
    },

    drawChart() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('main'))
      // 指定图表的配置项和数据
      let option = {
        title: {
          text: '上证指数',
          left: 0,
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
          },
        },
        legend: {
          data: ['日K', 'MA5', 'MA10', 'MA20', 'MA30'],
        },
        grid: {
          left: '10%',
          right: '10%',
          bottom: '15%',
        },
        xAxis: {
          type: 'category',
          data: this.data0.categoryData,
          scale: true,
          boundaryGap: false,
          axisLine: { onZero: false },
          splitLine: { show: false },
          splitNumber: 20,
          min: 'dataMin',
          max: 'dataMax',
        },
        yAxis: {
          scale: true,
          splitArea: {
            show: true,
          },
        },
        dataZoom: [
          {
            type: 'inside',
            start: 50,
            end: 100,
          },
          {
            show: true,
            type: 'slider',
            top: '90%',
            start: 10,
            end: 100,
          },
        ],
        series: [
          {
            name: '日K',
            type: 'candlestick',
            data: this.data0.values,
            itemStyle: {
              color: this.upColor,
              color0: this.downColor,
              borderColor: this.upBorderColor,
              borderColor0: this.downBorderColor,
            },
            markPoint: {
              label: {
                normal: {
                  formatter: function (param) {
                    return param != null ? Math.round(param.value) : ''
                  },
                },
              },
              data: [
                {
                  name: 'XX标点',
                  coord: ['2013/5/31', 2300],
                  value: 2300,
                  itemStyle: {
                    color: 'rgb(41,60,85)',
                  },
                },
                {
                  name: 'highest value',
                  type: 'max',
                  valueDim: 'highest',
                },
                {
                  name: 'lowest value',
                  type: 'min',
                  valueDim: 'lowest',
                },
                {
                  name: 'average value on close',
                  type: 'average',
                  valueDim: 'close',
                },
              ],
              tooltip: {
                formatter: function (param) {
                  return param.name + '<br>' + (param.data.coord || '')
                },
              },
            },
            markLine: {
              symbol: ['none', 'none'],
              data: [
                [
                  {
                    name: 'from lowest to highest',
                    type: 'min',
                    valueDim: 'lowest',
                    symbol: 'circle',
                    symbolSize: 10,
                    label: {
                      show: false,
                    },
                    emphasis: {
                      label: {
                        show: false,
                      },
                    },
                  },
                  {
                    type: 'max',
                    valueDim: 'highest',
                    symbol: 'circle',
                    symbolSize: 10,
                    label: {
                      show: false,
                    },
                    emphasis: {
                      label: {
                        show: false,
                      },
                    },
                  },
                ],
                {
                  name: 'min line on close',
                  type: 'min',
                  valueDim: 'close',
                },
                {
                  name: 'max line on close',
                  type: 'max',
                  valueDim: 'close',
                },
              ],
            },
          },
          // {
          //   name: 'MA5',
          //   type: 'line',
          //   data: this.calculateMA(5),
          //   smooth: true,
          //   lineStyle: {
          //     opacity: 0.5,
          //   },
          // },
          // {
          //   name: 'MA10',
          //   type: 'line',
          //   data: this.calculateMA(10),
          //   smooth: true,
          //   lineStyle: {
          //     opacity: 0.5,
          //   },
          // },
          // {
          //   name: 'MA20',
          //   type: 'line',
          //   data: this.calculateMA(20),
          //   smooth: true,
          //   lineStyle: {
          //     opacity: 0.5,
          //   },
          // },
          // {
          //   name: 'MA30',
          //   type: 'line',
          //   data: this.calculateMA(30),
          //   smooth: true,
          //   lineStyle: {
          //     opacity: 0.5,
          //   },
          // },
        ],
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },
  },
  mounted() {},
}
</script>
